import {
  IDomEditor,
  IButtonMenu,
  SlateEditor,
  SlateElement,
  SlateNode,
} from '@wangeditor/editor';
//表格折叠按钮
class InsertTableFolding implements IButtonMenu {
  // TS 语法
  title: string;
  iconSvg?: string;
  tag: string;
  constructor() {
    this.title = '折叠/展开表格'; // 自定义菜单标题
    this.iconSvg =
      '<svg t="1704677958315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5980" width="200" height="200"><path d="M491.904 380.638H112.171c-16.032 0-29.091 10.99-29.091 24.437 0 13.446 13.059 24.436 29.09 24.436h379.864c16.032 0 29.09-10.99 29.09-24.436-0.129-13.576-13.187-24.437-29.22-24.437z m0 216.049H112.171c-16.032 0-29.091 10.99-29.091 24.436 0 13.447 13.059 24.437 29.09 24.437h379.864c16.032 0 29.09-10.99 29.09-24.437-0.129-13.446-13.187-24.436-29.22-24.436z m-0.517 216.307H112.56c-16.291 0-29.608 10.99-29.608 24.436 0 13.447 13.188 24.437 29.608 24.437h378.828c16.42 0 29.608-10.99 29.608-24.437 0-13.446-13.188-24.436-29.608-24.436zM681.19 334.739h93.737v316.897c0 16.033 10.99 29.091 24.437 29.091 13.446 0 24.307-13.058 24.307-29.09V334.738h93.737c14.74 0 21.85-3.878 23.273-6.723 1.164-2.327-0.13-9.438-8.145-19.394l-102.53-128.258c-8.404-10.602-19.264-16.291-30.513-16.291-11.378 0-22.109 5.818-30.513 16.29L666.32 308.753c-7.886 9.955-9.18 17.066-8.016 19.393 0.905 2.716 8.146 6.594 22.885 6.594z" p-id="5981"></path><path d="M112.688 861.737h768c16.291 0 29.608-10.99 29.608-24.436s-13.188-24.436-29.608-24.436h-768c-16.29 0-29.608 10.99-29.608 24.436 0 13.576 13.188 24.436 29.608 24.436z m379.216-697.535H112.171c-16.032 0-29.091 10.99-29.091 24.436 0 13.447 13.059 24.437 29.09 24.437h379.864c16.032 0 29.09-10.99 29.09-24.437-0.129-13.446-13.187-24.436-29.22-24.436z" p-id="5982"></path></svg>'; // 可选
    this.tag = 'button';
  }
  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor: IDomEditor): string | boolean {
    // TS 语法
    return ' hello ';
  }
  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor: IDomEditor): boolean {
    // TS 语法
    return false;
  }
  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor: IDomEditor): boolean {
    // TS 语法
    return false;
  }
  // 点击菜单时触发的函数
  exec(editor: IDomEditor, value: string | boolean) {
    // TS 语法
    if (this.isDisabled(editor)) {
      return;
    }
    const nodeEntries = SlateEditor.nodes(editor, {
      match: (node: SlateNode) => {
        // TS syntax
        // match: (node) => {          // JS syntax
        if (SlateElement.isElement(node)) {
          if (node.type === 'table') {
            return true; // 匹配 paragraph
          }
        }
        return false;
      },
      universal: true,
    });

    if (nodeEntries == null) {
      console.log('当前未选中的 table');
    } else {
      for (const nodeEntry of nodeEntries) {
        const [node] = nodeEntry;
        toggleTable(editor, node);
      }
    }
  }
}
const toggleTable = (editor: IDomEditor, node: SlateNode) => {
  for (let index = 1; index < node.children.length; index++) {
    const el = editor.toDOMNode(node.children[index]);
    el.classList.toggle('hidden');
  }
};
export default InsertTableFolding;
